import React from 'react';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import MinimizeIcon from '@mui/icons-material/Minimize';
import CropSquareIcon from '@mui/icons-material/CropSquare';
import CloseIcon from '@mui/icons-material/Close';
import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
const ipc = window.require('electron').ipcRenderer;
export default function WindowControls(props) {
  const [state, setState] = React.useState({
    windowIsMaximized: false,
    windowIsFullscreen: false,
  });
  React.useEffect(() => {
    ipc.on('maximize', (e) => {
      setState((state) => ({ ...state, windowIsMaximized: true }));
    });
    ipc.on('unmaximize', (e) => {
      setState((state) => ({ ...state, windowIsMaximized: false }));
    });
    ipc.on('enter-full-screen', (e) => {
      setState((state) => ({ ...state, windowIsFullscreen: true }));
    });
    ipc.on('leave-full-screen', (e) => {
      setState((state) => ({ ...state, windowIsFullscreen: false }));
    });
  }, []);
  let captionMaximize_hidden;
  let captionRestore_hidden;
  if (state.windowIsMaximized || state.windowIsFullscreen) {
    captionMaximize_hidden = true;
    captionRestore_hidden = false;
  } else {
    captionMaximize_hidden = false;
    captionRestore_hidden = true;
  }
  return (
    <React.Fragment>
      <Tooltip title="minimize" placement="left">
        <IconButton
          onClick={() => {
            console.log('minimize');
            ipc.invoke('minimize');
          }}
        >
          <MinimizeIcon />
        </IconButton>
      </Tooltip>
      <Tooltip title="maximize" placement="left">
        <IconButton
          onClick={() => {
            console.log('Max click');
            ipc.invoke('maximize');
          }}
          hidden={captionMaximize_hidden}
        >
          <CropSquareIcon />
        </IconButton>
      </Tooltip>
      <Tooltip title="unmaximize" placement="left">
        <IconButton
          hidden={captionRestore_hidden}
          onClick={() => {
            ipc.invoke('unmaximize');
            console.log('restore click');
          }}
        >
          <ScreenshotMonitorIcon />
        </IconButton>
      </Tooltip>
      <Tooltip title="exit" placement="left">
        <IconButton
          onClick={() => {
            console.log('close click');
            ipc.invoke('close');
            console.log('after invoke close');
          }}
        >
          <CloseIcon />
        </IconButton>
      </Tooltip>
    </React.Fragment>
  );
}
// var captionMinimize =
//   document.querySelector('.windows-caption-buttons .caption-minimise, body.linux .titlebar-linux .caption-minimise')

// var captionMaximize =
//   document.querySelector('.windows-caption-buttons .caption-maximize, body.linux .titlebar-linux .caption-maximize')

// var captionRestore =
//   document.querySelector('.windows-caption-buttons .caption-restore, body.linux .titlebar-linux .caption-restore')

// var captionClose =
//   document.querySelector('.windows-caption-buttons .caption-close, body.linux .titlebar-linux .caption-close')

// var linuxClose = document.querySelector('#linux-control-buttons #close-button')
// var linuxMinimize = document.querySelector('#linux-control-buttons #minimize-button')
// var linuxMaximize = document.querySelector('#linux-control-buttons #maximize-button')
